"use client";

import { memo } from "react";
import type { ReactNode, FC } from "react";
import styles from "./style.module.scss";
import CommonHeader from "@/components/common-header";
import { shallowEqualApp, useAppSelector } from "@/store/hooks";
import TopRankingItem from "../top-ranking-item";
interface IProps {
  children?: ReactNode;
}

interface Rank {
  id: number;
  [key: string]: any;
}

const TopRanking: FC<IProps> = (props) => {
  const { ranks } = useAppSelector(
    (state: any) => ({
      ranks: state.recommended.ranking,
    }),
    shallowEqualApp
  );
  return (
    <div className={styles.topRangkingWrapper}>
      <CommonHeader
        icon={"sprite_02"}
        iconShow={true}
        name={"榜单"}
        moreLink={"/discover/ranking"}
        keywords={[]}
      ></CommonHeader>
      <div className={`${styles.rankBg} recommended_bg`}>
        {ranks.map((rank: Rank) => {
          return <TopRankingItem item={rank} key={rank.id}></TopRankingItem>;
        })}
      </div>
    </div>
  );
};

export default memo(TopRanking);
